<template>
	<view>

		<view class="shezhi">
			<image @click="godetail" class="image_search" src="../../static/users/search.png" mode="aspectFill"></image>
			<image class="image_sdetail" src="../../static/users/detail.png" mode="aspectFill"></image>
		</view>


		<image class="back_image" src="../../static/users/background.png" mode="aspectFill"></image>

		<view class="name_shop">
			<view class="head">
				<image class="avtral" src="../../static/users/shop.png" mode="aspectFill"></image>
				<image src="../../static/users/vip.png" class="vip_imgage" mode="aspectFill"></image>
				<view class="shop_title">
					鬼灭之刃动漫店
				</view>

				<view class="home_shop">
					7号宿舍楼505
				</view>

				<view class="time_start">
					营业：08:00-22:00
					<text>销量:2366</text>
				</view>

				<view class="youhui">
					<view v-for="(item,index) in 6">
						<view class="fenge_xian" v-if="index!=0"></view>
						<view class="youhui_two">
							45减10
						</view>
					</view>
				</view>

				<view class="content">
					只卖关于动漫一切周边，欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos道具服装等...欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos等...
				</view>

				<view class="qq">
					<image src="../../static/users/qq.png" class="image_biao" mode=""></image>
					<text>1068225963</text>
				</view>

				<view class="weixin">
					<image src="../../static/users/weixin.png" class="image_biao" mode=""></image>
					<text>AROU-123</text>
				</view>

				<view class="phone">
					<image src="../../static/users/phone.png" class="image_biao" mode=""></image>
					<text>15282033299</text>
				</view>


			</view>




			<u-tabs :list="list" :current="current" bg-color="#fff" active-color="#181818" inactive-color="#181818"
				@change="change"></u-tabs>
			<view v-if="current==0">


				<view class="shai_xuan">
					<view class="text1">
						宿舍楼
						<image class="image_lou" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
					</view>

					<view class="xian">

					</view>

					<view class="text2">
						销量
						<image class="image_xiao" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
					</view>

				</view>

				<view class="detailback" v-for="(item,index) in menu" @click="jumpde(index)">
					<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
					<view class="title">
						灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
					</view>

					<view class="have">
						已售100
					</view>

					<view class="price">
						<text>¥</text>
						366
					</view>

					<view class="guige" v-if="index%2==0" @click.stop="shower = true">
						选规格
					</view>

					<view class="bujin" v-if="index%2!=0">
						<image class="image_bu_jian" @click.stop="reduce(index)" src="../../static/users/jian.png"
							mode="aspectFill"></image>
						<view class="num">
							{{item.num}}
						</view>
						<image class="image_bu_jia" @click.stop="add(index)" src="../../static/users/jia.png"
							mode="aspectFill">
						</image>
					</view>
				</view>

				<view class="bottom">

				</view>
			</view>

			<view v-if="current==1">
				222
			</view>

			<view v-if="current==2">
				333
			</view>

			<view v-if="current==3">
				444
			</view>

			<view v-if="current==4">
				555
			</view>


		</view>

		<view class="gosuan">
			<image @click="show = true" src="../../static/users/shopping.png" class="image_shopping" mode=""></image>
			<view class="num_shop">
				{{menu.length}}
			</view>
			<view class="price_shopping">
				<text>¥</text>
				336
			</view>

			<view class="jie">
				共2件
				<text>需xx元起送</text>
			</view>

			<view class="go_suan" @click="payment">
				去结算
			</view>

			<view class="xia_"></view>

		</view>

		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="bottom_la">
				<view class="top_la"></view>
				<view class="head_la">
					<view class="title_la">
						已选商品
					</view>

					<view class="clear_la">
						<image class="clear_image" src="../../static/users/clear.png" mode=""></image>
						<text>清空</text>
					</view>
				</view>


				<view class="detailback" v-for="(item,index) in menu">
					<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
					<view class="title">
						灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
					</view>

					<view class="have">
						已售100
					</view>

					<view class="price">
						<text>¥</text>
						366
					</view>


					<view class="bujin">
						<image class="image_bu_jian" @click="reduce(index)" src="../../static/users/jian.png"
							mode="aspectFill"></image>
						<view class="num">
							{{item.num}}
						</view>
						<image class="image_bu_jia" @click="add(index)" src="../../static/users/jia.png"
							mode="aspectFill">
						</image>
					</view>
				</view>

				<view class="gosuan">
					<image @click="show = true" src="../../static/users/shopping.png" class="image_shopping" mode="">
					</image>
					<view class="num_shop">
						{{menu.length}}
					</view>
					<view class="price_shopping">
						<text>¥</text>
						336
					</view>

					<view class="jie">
						共2件
						<text>需xx元起送</text>
					</view>

					<view class="go_suan">
						去结算
					</view>

					<view class="xia_"></view>

				</view>

			</view>
		</u-popup>
		<!-- 选择规格 -->
		<u-popup v-model="shower" mode="bottom" border-radius="30">
			<view class="main">
				<image class="image_shop" src="../../static/users/shop2.png" mode=""></image>
				<view class="shop_t">
					这是一个商品标题，这是一个商品标题，这是...
				</view>

				<view class="xi_an"></view>
				<view class="zi_9">
					规格分类
				</view>
				<view class="flex">
					<view v-for="(item,index) in menu" :class="num==index?'select':'gui'" @click="select(index)">
						<image src="../../static/users/guige.png" mode=""></image>
						<view class="gui_name">{{item.name}}</view>
					</view>

				</view>

				<view class="bottom"></view>
				<!-- 加入购物车 -->
				<view class="gosuan">
					<view class="settlement">
						<view class="zi0"><text class="text_1">总计：¥0</text>
						</view>

					</view>

					<view class="go_suan">
						加入购物车
					</view>

					<view class="xia_"></view>

				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推荐'
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}],
				current: 0,
				menu: [{
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}],
				show: false,
				shower: false,
				num:""
			}
		},
		methods: {
			payment() {
				uni.navigateTo({
					url: "../confirm/confirm"
				})
			},
			change(index) {
				this.current = index;
			},
			reduce(index) {
				if (this.menu[index].num > 1) {
					this.menu[index].num--
				}

			},
			add(index) {
				this.menu[index].num++
			},
			godetail() {
				uni.navigateTo({
					url: "../shopsearch/shopsearch"
				})
			},
			jumpde(index) {
				uni.navigateTo({
					url: "../detail/detail?id=" + index
				})
			},
			select(index) {
				this.num = index
			}
		},
		onLoad(e) {
			console.log(e.id);
		}
	}
</script>

<style lang="scss">
	.bottom_la {
		height: 900rpx;
		background: #FFFFFF;
		position: relative;

		.top_la {
			width: 750rpx;
			height: 105rpx;
			background-color: #fff;
		}

		.head_la {
			position: fixed;
			top: 0;
			width: 750rpx;
			height: 105rpx;
			background: #fff;
			z-index: 5;

			.title_la {
				margin: 42rpx 0 0 42rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #181818;
			}

			.clear_la {
				position: absolute;
				right: 87rpx;
				top: 42rpx;

				.clear_image {
					width: 22rpx;
					height: 24rpx;
				}

				text {
					width: 60rpx;
					position: absolute;
					top: 2rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #999999;
				}
			}
		}



	}

	.head {
		width: 750rpx;
		height: 365rpx;
		position: relative;

		.avtral {
			margin: 30rpx 0 0 30rpx;
			width: 180rpx;
			height: 150rpx;
		}

		.vip_imgage {
			position: absolute;
			top: 28rpx;
			left: 151rpx;
			width: 60rpx;
			height: 30rpx;
			z-index: 100;
		}

		.shop_title {
			position: absolute;
			top: 16rpx;
			left: 228rpx;
			width: 350rpx;
			height: 34rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
			line-height: 80rpx;
		}

		.home_shop {
			position: absolute;
			top: 18rpx;
			left: 594rpx;

			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			line-height: 80rpx;
		}

		.time_start {
			position: absolute;
			top: 98rpx;
			left: 229rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;

			text {
				margin-left: 20rpx;
			}
		}

		.youhui {
			position: absolute;
			left: 229rpx;
			top: 136rpx;
			height: 28rpx;
			border: 1px solid #FF5252;
			border-radius: 14rpx;
			// width: 480rpx;
			display: flex;

			.youhui_one {
				margin: 0rpx 0 0 16rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 25rpx;
			}

			.youhui_two {
				margin: 0rpx 6px;
				float: left;
				right: 16rpx;
				font-size: 18rpx;
				// -webkit-transform: scale(0.5);
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 28rpx;
			}

			.fenge_xian {
				margin: 5rpx 0px;
				float: left;
				width: 1px;
				height: 18rpx;
				background: #FF5252;
			}
		}

		.content {
			margin: 29rpx 0 0 30rpx;
			width: 678rpx;
			height: 56rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.qq {
			position: absolute;
			top: 292rpx;
			left: 30rpx;
			width: 200rpx;
			height: 40rpx;

			text {
				position: absolute;
				top: 0rpx;
				left: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
				line-height: 40rpx;
			}
		}

		.weixin {
			position: absolute;
			top: 292rpx;
			left: 283rpx;
			width: 200rpx;
			height: 40rpx;

			text {
				position: absolute;
				top: 0rpx;
				left: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
				line-height: 40rpx;
			}
		}

		.phone {
			position: absolute;
			left: 516rpx;
			top: 292rpx;
			width: 200rpx;
			height: 40rpx;

			text {
				position: absolute;
				top: 0rpx;
				left: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
				line-height: 40rpx;
			}
		}

	}

	.image_biao {
		width: 40rpx;
		height: 40rpx;
	}

	.name_shop {
		position: absolute;
		top: 259rpx;
		width: 750rpx;
		background: #FAFBFC;
		border-radius: 40rpx 40rpx 0 0;
	}

	.back_image {
		width: 750rpx;
		height: 310rpx;
	}

	.shai_xuan {
		margin: 20rpx 0 20rpx 30rpx;
		width: 690rpx;
		height: 68rpx;
		background: #F6F7F9;
		border-radius: 34rpx;
		position: relative;
	}

	.text1 {
		margin-left: 53rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.text2 {
		position: absolute;
		left: 224rpx;
		top: -68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.image_lou {
		position: absolute;
		top: 32rpx;
		left: 82rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.image_xiao {
		position: absolute;
		top: 32rpx;
		left: 62rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.xian {
		position: absolute;
		top: 19rpx;
		left: 184rpx;
		width: 1rpx;
		height: 30rpx;
		background: #FFFFFF;
	}

	.detailback {
		height: 190rpx;
		width: 750rpx;
		position: relative;
	}

	.img_detail {
		margin: 20rpx 0 0 30rpx;
		width: 180rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.title {
		position: absolute;
		top: 17rpx;
		left: 232rpx;
		width: 477rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.have {
		position: absolute;
		left: 232rpx;
		top: 63rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.price {
		position: absolute;
		top: 102rpx;
		left: 232rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4646;

		text {
			font-size: 20rpx;
		}
	}

	.guige {
		position: absolute;
		right: 30rpx;
		top: 107rpx;
		width: 89rpx;
		height: 36rpx;
		background: #F48F5B;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;

		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bujin {
		position: absolute;
		left: 600rpx;
		top: 107rpx;
		width: 200rpx;
		height: 36rpx;

	}

	.image_bu_jian {
		width: 36rpx;
		height: 36rpx;
	}

	.image_bu_jia {
		margin-left: 48rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.num {
		position: absolute;
		left: 36rpx;
		top: 0;
		width: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}

	.bottom {
		width: 750rpx;
		height: 400rpx;
	}

	.gosuan {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
		border-radius: 40rpx 40rpx 0px 0px;

		.num_shop {
			position: absolute;
			left: 90rpx;
			top: 19rpx;
			width: 28rpx;
			height: 28rpx;
			background: #FF4646;
			border-radius: 50%;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 28rpx;
		}

		// position: relative;
		.image_shopping {
			margin: 23rpx 0 0 40rpx;
			width: 58rpx;
			height: 56rpx;
		}

		.price_shopping {
			position: absolute;
			top: 12rpx;
			left: 149rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF4646;

			text {

				font-size: 24rpx;
			}
		}

		.jie {
			position: absolute;
			top: 58rpx;
			left: 146rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #999999;

			text {
				margin-left: 30rpx;
			}
		}

		.go_suan {
			position: absolute;
			right: 30rpx;
			top: 15rpx;
			width: 190rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.xia_ {
			position: absolute;
			left: 241rpx;
			bottom: 18rpx;
			width: 268rpx;
			height: 10rpx;
			background-color: black;
		}
	}

	.shezhi {
		position: absolute;
		right: 10rpx;
		top: 22rpx;
		width: 140rpx;
		height: 58rpx;
		background: #fff;
		opacity: 0.6;
		border-radius: 29rpx;
		z-index: 5;

		.image_search {
			// margin: 12rpx 0 0 28rpx;
			position: absolute;
			bottom: 14rpx;
			left: 28rpx;
			width: 30rpx;
			height: 30rpx;
			// z-index: 100;
		}

		.image_sdetail {
			position: absolute;
			bottom: 14rpx;
			right: 27rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.main {
		width: 750rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
         .shop_t {
         	position: absolute;
         	left: 260rpx;
         	top: 76rpx;
         	width: 459rpx;
         	height: 70rpx;
         	font-size: 28rpx;
         	font-family: PingFang SC;
         	font-weight: 500;
         	color: #000000;
         	display: -webkit-box;
         	-webkit-box-orient: vertical;
         	-webkit-line-clamp: 2;
         	overflow: hidden;
         
         }
         
         .xi_an {
         	width: 749rpx;
         	height: 1rpx;
         	background: #E5E5E5;
         }
         
         .flex {
         	width: 750rpx;
         	display: flex;
         	flex-wrap: wrap;
         
         	// justify-content: space-around;
         	.select {
         		border: 2px solid #000000;
         		margin: 0 0 19rpx 30rpx;
         		margin-top: 20rpx;
         		width: 330rpx;
         		height: 100rpx;
         		background: #F2F4FA;
         		border-radius: 30rpx;
         		position: relative;
         
         		image {
         			margin: 10rpx 0 10rpx 10rpx;
         			width: 100rpx;
         			height: 80rpx;
         		}
         
         
         		.gui_name {
         			position: absolute;
         			top: 37rpx;
         			right: 56rpx;
         			font-size: 26rpx;
         			font-family: PingFang SC;
         			font-weight: 500;
         			color: #181818;
         		}
         	}
         
         	.gui {
         		margin: 0 0 19rpx 30rpx;
         		margin-top: 20rpx;
         		width: 330rpx;
         		height: 100rpx;
         		background: #F2F4FA;
         		border-radius: 30rpx;
         		position: relative;
         		border: 2px solid #F2F4FA;
         
         		image {
         			margin: 10rpx 0 10rpx 10rpx;
         			width: 100rpx;
         			height: 80rpx;
         		}
         
         
         		.gui_name {
         			position: absolute;
         			top: 37rpx;
         			right: 56rpx;
         			font-size: 26rpx;
         			font-family: PingFang SC;
         			font-weight: 500;
         			color: #181818;
         		}
         	}
         }
		 
		 .zi_9 {
		 	margin: 29rpx 0 22rpx 37rpx;
		 	font-size: 20rpx;
		 	font-family: PingFang SC;
		 	font-weight: 500;
		 	color: #181818;
		 }
		.bottom {
			width: 750rpx;
			height: 400rpx;
		}
        .image_shop {
        	margin: 40rpx 0 30rpx 31rpx;
        	width: 200rpx;
        	height: 150rpx;
        }
        
		.gosuan {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
			border-radius: 40rpx 40rpx 0px 0px;

			.settlement {
				width: 280rpx;
				height: 33rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;

				.zi0 {
					margin: 39rpx 0 0 32rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #181818;

					.go_suan {
						position: absolute;
						right: 30rpx;
						top: 30rpx;
						width: 190rpx;
						height: 68rpx;
						background: #181818;
						border-radius: 34rpx;
						text-align: center;
						line-height: 68rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					.xia_ {
						position: absolute;
						left: 241rpx;
						bottom: 18rpx;
						width: 268rpx;
						height: 10rpx;
						background-color: black;
					}
				}

			}
		}
	}
</style>
